<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :init-param="initParam" :data-callback="dataCallback">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')"> 新增公司 </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-if="scope.row.id > 1" type="primary" link :icon="View" @click="openDrawer('查看', scope.row)">
          查看
        </el-button>
        <el-button v-if="scope.row.id > 1" type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">
          编辑
        </el-button>
        <el-button v-if="scope.row.id > 1" type="primary" link :icon="Delete" @click="oneDelete(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <CompanyDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="companyIndex">
import { ref, reactive } from "vue";
import { Company } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import CompanyDrawer from "@/views/platform/company/components/CompanyDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { getCompanyList, saveCompany, deleteCompany } from "@/api/modules/company";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 初始化请求参数
const initParam = reactive({});

// 数据回调处理
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total
  };
};

// 获取表格数据
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  return getCompanyList(newParams);
};

// 表格列配置
const columns = reactive<ColumnProps<Company.ResCompanyList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "name",
    fixed: "left",
    label: "公司名称",
    search: { el: "input" },
    align: "left",
    width: 320
  },
  {
    prop: "provinceName",
    label: "省份",
    width: 100
  },
  {
    prop: "cityName",
    label: "城市",
    width: 100
  },
  {
    prop: "areaName",
    label: "地区",
    width: 100
  },
  {
    prop: "version",
    label: "版本",
    search: { el: "input" },
    width: 100
  },
  {
    prop: "versionExpiryTimeText",
    label: "过期时间",
    width: 180
  },
  {
    prop: "contactName",
    label: "联系人",
    width: 100
  },
  {
    prop: "contactPhone",
    label: "联系电话",
    width: 130
  },
  {
    prop: "createTimeText",
    label: "创建时间",
    width: 180
  },
  {
    prop: "address",
    label: "详细地址"
  },

  { prop: "operation", label: "操作", fixed: "right", width: 240 }
]);

// 单个删除
const oneDelete = async (params: Company.ResCompanyList) => {
  await useHandleData(deleteCompany, params.id, `删除【${params.name}】公司`);
  proTable.value?.getTableList();
};

// 打开抽屉
const drawerRef = ref<InstanceType<typeof CompanyDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Company.ResCompanyList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? saveCompany : title === "编辑" ? saveCompany : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
